<template>
	<view>
		<view class="swiper">
			<swiper :indicator-dots="true" style="height: 325rpx;" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in allMessage.bannerList" :key='index' @click="$go(item.nativeUrl)">
					<view class="swiper-item">
						<image style="" :src="item.resourceImg.replace(/\\/g,'/')" mode="widthFix"></image>
						<!-- <view class="btn flex_center">
							立即选购
						</view> -->
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="item-box flex_v_venter" @click="$go('/pages/shop/good-detail?id='+item.id)" v-for="(item,index) in allMessage.goodsPackageList" :key='index'>
			<view class="left flex_center">
				<view class="img">
					<image style="width: 100%;height: 100%;" :src="item.thumbnail.replace(/\\/g,'/')" mode=""></image>
				</view>
			</view>
			<view class="right flex_coum_center">
				<view class="item">{{item.name}}</view>
				<view class="btn flex_center">立即购买</view>
			</view>
		</view>
		<!-- <view class="item-box flex_v_venter">
			<view class="right flex_coum_center">
				<view class="item">这是标题这是标题
					这是标题这是标题这是标题</view>
				<view class="btn flex_center">立即购买</view>
			</view>
			<view class="left flex_center">
				<view class="img">

				</view>
			</view>
		</view> -->

		<!-- <view class="dayPurchase flex_center" style="width: 100%;margin-left: 0;">快捷护肤</view>
		<view class="tip flex_center" style="width: 100%;margin-left: 0;">每天给肌肤最好的呵护</view>
		<view class="gotoMore" @click="$go('/pages/shop/goods-list?item='+ JSON.stringify({lk:1}))">点击进入更多></view>
		<scroll-view scroll-x="true" style="white-space: nowrap;height: 450rpx;margin: 30px 0;">
			<view class="bot_item flex_coum_center" v-for="(item,index) in goodsList" :key='index' @click="$go('/pages/shop/good-detail?id='+item.id)">
				<view class="img">
					<image style="width: 100%;height: 100%;" :src="item.thumbnail.replace(/\\/g,'/')" mode="widthFix"></image>
				</view>
				<view class="bot_pop flex_coum_center">
					<view class="num">
						{{item.name}}
					</view>
					<view class="btn flex_center">
						立即抢购
					</view>
				</view>
			</view>
		</scroll-view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allMessage:{},
				goodsList:[]
			};
		},
		onLoad(e) {
			console.log(e);
			if(e.scene){
				uni.setStorageSync('fromOpenid',decodeURIComponent(e.scene))
			}
			// if(e.openid){
			// 	uni.setStorageSync('fromOpenid',e.openid)
			// }
			this.$ajax('api/Main/Query').then(res => {
				this.allMessage = res.Data
			})
			this.$ajax('api/Main/QueryGoods',{pageIndex:1,pageSize:10,type:0}).then(res => {
				this.goodsList = res.Data.list
			})
		}
	}
</script>

<style lang="scss">
	.swiper {
		width: 100%;

		.swiper-item {
			width: 100%;
			height: 325rpx;
			position: relative;
			&>image{
				width: 100%;
				height: 100%;
				
			}
			.btn {
				width: 240rpx;
				height: 70rpx;
				background: #202029;
				position: absolute;
				margin: auto;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	.item-box {
		width: 690rpx;
		height: 250rpx;
		margin: 48rpx 30rpx 0;
		background: '#FFFFFF';
		box-shadow: 0px 0px 10px 3px rgba(132, 132, 132, 0.23);
		border-radius: 19px;
		overflow: hidden;
		.left {
			flex: 1;
			height: 100%;

			.img {
				width: 80%;
				height: 80%;
				border-radius: 10rpx;
			}
		}

		.right {
			flex: 1;
			height: 100%;
		padding: 0 5%;

			.item {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
				line-height: 48rpx;
			}

			.btn {
				width: 195rpx;
				height: 50rpx;
				background: #202029;
				border-radius: 25rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFEFE;
				margin: 20rpx 0 0;
			}
		}
	}

	.dayPurchase {
		width: 230px;
		height: 55rpx;
		font-size: 59rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #05072E;
		line-height: 48px;
		margin-left: 235rpx;
		margin-top: 62rpx;
	}

	.tip {
		width: 340rpx;
		height: 27rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #202029;
		line-height: 48rpx;
		margin-left: 186rpx;
		margin-top: 35rpx;
	}

	.gotoMore {
		    margin-right: 49rpx;
		    margin-top: 58rpx;
		    font-family: Source Han Sans CN;
		    font-size: 24rpx;
			display: flex;
			justify-content: flex-end;
		    color: #666666;
	}
	.bot_item{
		width: 280rpx;
		height: 428rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10rpx 3px rgba(132, 132, 132, 0.23);
		border-radius: 5rpx;
		margin:10rpx  0 0 32rpx;
		flex-shrink: 0;
		display: inline-block;
		position: relative;
		&:last-child{
			margin-right: 32rpx;
		}
		.img{
			margin: 20rpx 20rpx 0;
			height: 60%;
		}
		.bot_pop{
			position: absolute;
			bottom: 0;
			width: 100%;
			.num{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				line-height: 48rpx;
				width: 85%;
				overflow:hidden; 
				text-overflow:ellipsis;
				white-space:nowrap;
				text-align: center;
			}
			.btn{
				width: 193rpx;
				height: 50rpx;
				background: #202029;
				border-radius: 25rpx;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				margin: 10rpx 0 26rpx;
			}
		}
	}
</style>
